<template>
  <div>
    <el-table ref="tableRef" v-loading="loading" :data="dataSource" border stripe :height="autoHeight" @row-click="handleRowClick" @select="selectSingle" @select-all="selectAll" @selection-change="selectAll" >
      <el-table-column label="目标工作页" prop="targetSheet" align="center"></el-table-column>
      <el-table-column label="关联工作页" prop="joinSheet" align="center"></el-table-column>
      <el-table-column label="数据源处理" prop="sourceScript" align="center"></el-table-column>
      <el-table-column label="操作" width="100px">
        <template slot="header">
          <el-button type="primary" @click="editDocx({})" icon="el-icon-circle-plus-outline"></el-button>
        </template>
        <template slot-scope="scope">
          <el-button type="success" icon="el-icon-edit" circle @click="editDocx(scope.row)" title="编辑"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="removeData(scope.row, scope.$index)" title="删除"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="lab-table-page">
      <div style="display: inline-flex">
        <el-pagination
            :disabled="loading"
            :current-page="pageInfo.page"
            :page-sizes="[5, 10, 15, 20, 50, 100]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <el-button-group style="padding: 2px 5px">
          <el-button icon="el-icon-refresh" title="刷新" :disabled="loading" @click="loadSource([])" />
        </el-button-group>
      </div>
    </div>

    <el-dialog title="报告输出配置" :visible.sync="visible" width="80%">
      <el-form label-width="100px" label-position="right">
        <el-form-item label="目标工作页" required>
          <el-select v-model="entityInfo.targetSheet" style="width: 100%" filterable clearable allow-create>
            <template v-for="sheet in excelTemplate.sheets">
              <el-option :key="sheet.sheetId" :value="sheet.sheetName" :label="sheet.sheetName" ></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="关联工作页">
          <el-select v-model="entityInfo.joinSheets" style="width: 100%" multiple>
            <template v-for="sheet in excelTemplate.sheets">
              <el-option v-if="sheet.sheetName !== entityInfo.targetSheet && sheet.sheetName !== excelTemplate.excelOut.outName" :key="sheet.sheetId" :value="sheet.sheetName" :label="sheet.sheetName" ></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="数据源处理">
          <code-editor ref="sourceRef" :config="{language: 'java'}" style="height: 400px"> </code-editor>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button icon="el-icon-circle-check" type="success" @click="saveDocx">{{ entityInfo.docxId ? '更新' : '保存' }}</el-button>
          <el-button icon="el-icon-circle-close" type="info" @click="visible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import IdeaTable from "@/mixins/IdeaTable";
import CodeEditor from "@/components/codeEditor/CodeEditor";

export default {
  name: "ExcelDocxTable",
  components: {CodeEditor},
  mixins: [IdeaTable],
  inject: {
    excelTemplate: {
      from: 'excelTemplate',
      default: function () {
        return { sheets: [], excelId: '0' }
      }
    }
  },
  data() {
    return {
      columns: []
    }
  },
  computed: {
    autoHeight(){
      return `calc(100vh - 292px)`
    }
  },
  created() {
    this.queryUrl = 'excelDocx/queryPage'
    this.saveUrl = 'excelDocx/save'
    this.removeUrl = 'excelDocx/delete/'
    this.rowKey = 'docxId'
    this.pageInfo.pageSize = 20
    this.addFilter({ field: 'excelId',op: '=',value: this.excelTemplate.excelId })
    this.addFilter({ field: 'outId',op: '=',value: this.excelTemplate.excelOut.outId })
    this.loadSource()
  },
  methods: {
    initEntity() {
      this.entityInfo = { joinSheets: [], excelId: this.excelTemplate.excelId, outId: this.excelTemplate.excelOut.outId  }
    },
    editDocx(row) {
      this.entityInfo = this.$Util.copy(row)
      this.$set(this.entityInfo, 'joinSheets', this.$Util.toArray(this.entityInfo.joinSheet))
      this.visible = true
      setTimeout(() => {
        this.$refs.sourceRef.setValue(this.entityInfo.sourceScript || '', 'java')
      },500)
    },
    saveDocx() {
      this.entityInfo.joinSheet = this.$Util.toTextString(this.entityInfo.joinSheets)
      this.entityInfo.sourceScript = this.$refs.sourceRef.code
      this.entityInfo.excelId = this.excelTemplate.excelId
      this.entityInfo.outId = this.excelTemplate.excelOut.outId
      this.saveData(this.entityInfo)
    }
  }
}
</script>

<style scoped>

</style>
